<template>
    <div>
        <section class="content-header">
            排班管理&nbsp;/&nbsp;值班管理
        </section>
        <section class="main">
            <div class="date">
                <b>当前值班</b>
                <!-- 当前时间 -->
                <span>{{dateTime}}{{time1}}</span>
            </div>

            <div class="box" v-if="indexData.length==0">
                <div class="box-body">
                    <table id="example" class="table table-bordered" style="font-size:14px">
                        <tbody>
                            <tr>
                                <td>当前暂无值班安排</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="box" v-for="item1 in indexData" :key="item1.value">
                <div class="box-body">
                    <table id="example" class="table table-bordered" style="font-size:14px">
                        <thead style="font-weight:700">
                            <tr>
                                <!-- 单位 -->
                                <td colspan='999' style="font-size:20px">{{item1.name}}</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <!-- 部门 -->
                                <td v-for="item2 in item1.sysDeptList" :key="item2.value" style="font-size:18px">{{item2.name}}</td>
                            </tr>
                            <tr>
                                <td v-for="item2 in item1.sysDeptList" :key="item2.value" style="padding:0px">
                                    <div style="display:flex;flex-direction:row;">
                                        <div style="flex:1" v-for="item3 in item2.schedualPlanList" :key="item3.value">
                                            <!-- 岗位 -->
                                            <p class="jobName">{{item3.jobName}}</p>
                                            <!-- 值班人员列表 -->
                                            <p class="sysPerson" v-for="item4 in item3.sysPersonList" :key="item4.value">{{item4.personName}}</p>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import utils from "@/utils/index"
export default {
    data() {
        return {
            dateTime: this.getdateTime(),
            time1: this.getTime1(),
            indexData: []
        };
    },
    mounted() {
        this.getTime();
        this.getIndex()
    },
    methods: {
        //当前时间
        getTime() {
            setInterval(() => {
                this.dateTime = this.getdateTime();
                this.time1 = this.getTime1()
            }, 1000);
        },
        //获取排班列表
        getIndex() {
            this.$api.paiban.index({
                dateTime: this.dateTime,
                time1: this.time1
            }).then(res => {
                if (res.success) {
                    this.indexData = res.data
                    // console.log(this.indexData);
                }
            });
        },
        //获取当前时间
        getdateTime() {
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var day = now.getDate();
            var clock = year + "年";
            if (month < 10) clock += "0";
            clock += month + "月";
            if (day < 10) clock += "0";
            clock += day + "日 "
            return clock;
        },
        getTime1() {
            var now = new Date();
            var hh = now.getHours();
            var mm = now.getMinutes();
            var ss = now.getSeconds();
            var clock = "";
            if (hh < 10) clock += "0";
            clock += hh + ":";
            if (mm < 10) clock += "0";
            clock += mm + ":";
            if (ss < 10) clock += "0";
            clock += ss;
            return clock;
        },
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.main {
  padding: 50px;
  .date {
    height: 52px;
    line-height: 52px;
    b {
      font-size: 18px;
      margin-right: 34px;
    }
    span {
      font-size: 16px;
      color: #3f51b5;
    }
  }
  .flexTd {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
  }
  .sysPerson {
    border: 1px solid #f4f4f4;
    padding: 8px 0;
    margin: 0;
    border-spacing: 0;
    box-sizing: border-box;
    margin-left: -1px;
  }
  .jobName {
    border: 1px solid #f4f4f4;
    margin: 0;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 700;
    border-left: 0px;
  }
}
</style>
